<!-- 商品规格选择弹窗组件 -->
<template>
    <!-- 底部弹出的弹窗组件 -->
    <nut-popup position="bottom" :visible="showSpecPopup" @update:visible="updateVisible" round>
        <view class="specpopup">
            <!-- 头部 -->
            <view calss="header">
                <!-- 关闭按钮 -->
                <text class="close" @tap="closePopup">×</text>
                <!-- 商品基本信息 -->
                <view class="info" :style="{ display: 'flex' }">
                    <!-- 商品缩略图 -->
                    <image :src="goodsImages[0]" class="thumb" :style="{ width: '300rpx', height: '300rpx' }"></image>
                    <!-- 商品描述 -->
                    <view calss="desc">
                        <view class="title">专用肥皂除菌 男女通用母婴除法枣露</view>
                        <view class="text" :style="{ margin: '20rpx 0 40rpx' }">先用后付 7天无理由 运费险</view>
                        <view class="price" :style="{ color: 'red' }">¥{{ price }}起 券后价{{ price + 20 }}</view>
                    </view>
                </view>
            </view>

            <!-- 规格选择列表 -->
            <view class="spec-list" :style="{ margin: '40rpx 0' }">
                <!-- 规格标题 -->
                <view class="spec-title">型号</view>
                <!-- 规格选项 -->
                <view class="spec-items">
                    <!-- 循环渲染规格选项 -->
                    <text class="spec-item" :class="{ active: selectedSpec === item }" v-for="(item, index) in specs"
                        :key="index" @tap="selectSpec(item)">{{ item.name }}</text>
                </view>
            </view>


            <view class="footer">
                <!-- 数量 -->
                <view class="shop-quantity" :style="{ display: 'flex', justifyContent: 'space-between' }">
                    <!-- 数量标签 -->
                    <view>
                        <text>数量</text>
                        <text>限购5瓶</text>
                    </view>
                    <!-- 数量控制按钮 -->
                    <view class="quantity-control">
                        <text class="minus" :class="{ disabled: quantity <= 1 }" @tap="decreaseQuantity"
                            :style="{}">-</text>
                        <!-- 当前选择数量 -->
                        <text class="number" :style="{ margin: '0 10rpx' }">{{ quantity }}</text>
                        <text class="plus" @tap="increaseQuantity">+</text>
                    </view>
                </view>
            </view>

            <view class="one" :style="{}">
                    <view class="btn" type="submit" @tap="addToCart">加入购物车</view>
            </view>
        </view>
    </nut-popup>
</template>

<script lang="ts" setup>

import http from "@/utils/http";

import Taro from "@tarojs/taro";

import { ref } from "vue";

/**
 * 组件接收的属性类型定义
 */
const props = defineProps<{
    goodsImages: string[];
    price: number;
    specs: any[];
    selectedSpec: any;
    showSpecPopup: boolean;
    title: string;
}>();

// const selectedSpec = ref({});


/**
 * 定义组件触发的事件类型
 */
const emit = defineEmits<{
    (e: "update:showSpecPopup", value: boolean): void;
    (e: "select-spec", spec: string): void;
    (e: "add-to-cart"): void;
    (e: "buy-now"): void;
}>();


/**
 * 更新弹窗显示状态
 * @param value - 弹窗显示状态，true 为显示，false 为隐藏
 */
const updateVisible = (value: boolean) => {
    console.log('updateVisible called with value:', value); emit("update:showSpecPopup", value);
};


/**
 * 商品数量，初始值为 1
 */
const quantity = ref(1);


/**
 * 关闭弹窗
 */
const closePopup = () => {
    emit("update:showSpecPopup", false);
};


/**
 * 选择商品规格
 * @param spec - 选中的规格对象
 */
const selectSpec = (spec: any) => {
    console.log("Selected spec:", spec);
    // selectedSpec.value = spec;
    emit("select-spec", spec);
};


/**
 * 减少商品数量，数量最小为 1
 */
const decreaseQuantity = () => {
    if (quantity.value > 1) {
        quantity.value--;
    }
};


/**
 * 增加商品数量
 */
const increaseQuantity = () => {
    quantity.value++;
};


/**
 * 将商品添加到购物车
 */
const addToCart = () => {
    emit("add-to-cart");
    http
        .postQuery("/api/shoppingCart/add", {
            specificationsId: props.selectedSpec.id,
            amount: quantity.value,
        })
        .then((res) => {
            console.log("添加购物车 === ", res);
            if (res.code == 0) {
                Taro.showToast({
                    title: "添加成功",
                    icon: "success",
                });
            } else {
                Taro.showToast({
                    title: "添加失败",
                    icon: "none",
                });
            }
        });
    closePopup();
};


/**
 * 立即购买商品
 */
// const buyNow = () => {
//   emit("buy-now");
//   closePopup();
//   Taro.setStorageSync("goods", [
//     {
//       image: props.goodsImages[0],
//       goodsName: props.title,
//       specName: props.selectedSpec.name,
//       specId: props.selectedSpec.id,
//       price: props.price,
//       amount: quantity.value,
//     },
//   ]);
//   Taro.navigateTo({
//     url: "/pages-detail/checkout/checkout?buy=1",
//   });
// };
</script>

<!-- 组件样式 -->
<style lang="scss">
.specpopup {
    height: 900rpx;
    background: #fff;
    padding: 30rpx;

    .header {
        height: 400rpx;
    }
}
.one {
    display: flex;
    justify-content: flex-end;
    .btn{
         background: #ff6146;
         color: #fefefe;
         width: 150rpx;
         height: 50rpx;
         font-size: 25rpx;
         text-align: center;
         line-height: 50rpx;
         margin-top: 250rpx;
    }
}
</style>
